﻿    <s:SurfaceWindow x:Class="CitiSurface.ShellView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:s="http://schemas.microsoft.com/surface/2008"
    xmlns:cs="clr-namespace:CitiSurface"
    Loaded="SurfaceWindowLoaded" WindowState="Maximized" x:Name="LayoutRoot"
    Title="CitiSurface" DataContext="{Binding}">
    <Window.Background>
        <ImageBrush ImageSource="Resources\background.jpg" Opacity="0.2" Stretch="UniformToFill"/>
    </Window.Background>

    <s:SurfaceWindow.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="CitiSurfaceDictionary.xaml"/>
                <ResourceDictionary>
                    <!--Customized Converter, convert double into itself times (param)-->
                    <cs:DoublePorportionConverter x:Key="dpropConverter"/>
                    
                    <!--Style for each data item on ScatterLayer and the cursor being dragged -->                    
                    <Style x:Key="VideoScatterItemStyle" TargetType="{x:Type s:ScatterViewItem}">
                        <Setter Property="Width" Value="320"/>
                        <Setter Property="Height" Value="180"/>
                        <EventSetter Event="ContainerManipulationCompleted" Handler="ScatterViewItemContainerManipulationCompleted"/>
                    </Style>

                    <Style x:Key="DocScatterItemStyle" TargetType="{x:Type s:ScatterViewItem}">
                        <Setter Property="Width" Value="300"/>
                        <Setter Property="Height" Value="300"/>
                        <EventSetter Event="ContainerManipulationCompleted" Handler="ScatterViewItemContainerManipulationCompleted"/>
                    </Style>

                    <Style x:Key="ImageScatterItemStyle" TargetType="{x:Type s:ScatterViewItem}">
                        <Setter Property="Width" Value="250"/>
                        <Setter Property="Height" Value="220"/>
                        <EventSetter Event="ContainerManipulationCompleted" Handler="ScatterViewItemContainerManipulationCompleted"/>
                    </Style>
                    
                    <cs:CsScatterItemStyleSelector x:Key="ScatterContainerStyleSelector" 
                                                   DocStyle="{StaticResource DocScatterItemStyle}"
                                                   ImageStyle="{StaticResource ImageScatterItemStyle}"
                                                   VideoStyle="{StaticResource VideoScatterItemStyle}"/>
                    
                    <!--Style for element inside the MainBar(not the controlPanel)-->
                    <Style x:Key="BarGridStyle" TargetType="{x:Type Grid}">
                        <Setter Property="VerticalAlignment" Value="Stretch"/>
                        <Setter Property="HorizontalAlignment" Value="Stretch" />
                        <Setter Property="RenderTransformOrigin" Value="0.5, 0.5"/>
                        <Style.Triggers>
                            <EventTrigger RoutedEvent="Grid.Loaded">
                                <BeginStoryboard Storyboard="{StaticResource fadein}"/>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="Grid.TouchDown">
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="(Grid.RenderTransform).(ScaleTransform.ScaleX)"
                                                         To="0.95"
                                                         Duration="0:0:0.1" />
                                        <DoubleAnimation Storyboard.TargetProperty="(Grid.RenderTransform).(ScaleTransform.ScaleY)"
                                                         To="0.95"
                                                         Duration="0:0:0.1" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="Grid.TouchLeave">
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="(Grid.RenderTransform).(ScaleTransform.ScaleX)"
                                                         To="1"
                                                         Duration="0:0:0.1" />
                                        <DoubleAnimation Storyboard.TargetProperty="(Grid.RenderTransform).(ScaleTransform.ScaleY)"
                                                         To="1"
                                                         Duration="0:0:0.1" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="Grid.TouchUp">
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="(Grid.RenderTransform).(ScaleTransform.ScaleX)"
                                                         To="1"
                                                         Duration="0:0:0.1" />
                                        <DoubleAnimation Storyboard.TargetProperty="(Grid.RenderTransform).(ScaleTransform.ScaleY)"
                                                         To="1"
                                                         Duration="0:0:0.1" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </Style.Triggers>
                    </Style>
                    
                    <!--Slide out the TileGrid and slide in the controlGrid-->
                    <Storyboard x:Key="TileSlideOut">
                        <DoubleAnimation Storyboard.TargetName="TileGrid" 
                                         Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)"
                                         Duration="0:0:0.5" To="-1000"/>
                        <DoubleAnimation Storyboard.TargetName="TileGrid"
                                         Storyboard.TargetProperty="Opacity"
                                         Duration ="0:0:0.5" To="0">
                            <DoubleAnimation.EasingFunction>
                                <QuadraticEase EasingMode="EaseIn"/>
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                        <DoubleAnimation Storyboard.TargetName="ControlGrid"
                                         Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)"
                                         Duration="0:0:0.5" From="1000" To="0" />
                        <DoubleAnimation Storyboard.TargetName="ControlGrid"
                                         Storyboard.TargetProperty="Opacity"
                                         Duration ="0:0:0.5" To="1">
                            <DoubleAnimation.EasingFunction>
                                <QuadraticEase EasingMode="EaseOut"/>
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>

                    <!--Slide in the TileGrid and slide out the controlGrid-->
                    <Storyboard x:Key="TileSlightIn">
                        <DoubleAnimation Storyboard.TargetName="TileGrid" 
                                         Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)"
                                         Duration="0:0:0.5" From="1000" To="0"/>
                        <DoubleAnimation Storyboard.TargetName="TileGrid"
                                         Storyboard.TargetProperty="Opacity"
                                         Duration ="0:0:0.5" To="1">
                            <DoubleAnimation.EasingFunction>
                                <QuadraticEase EasingMode="EaseIn"/>
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                        <DoubleAnimation Storyboard.TargetName="ControlGrid"
                                         Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)"
                                         Duration="0:0:0.5" To="-1000" />
                        <DoubleAnimation Storyboard.TargetName="ControlGrid"
                                         Storyboard.TargetProperty="Opacity"
                                         Duration ="0:0:0.5" To="0">
                            <DoubleAnimation.EasingFunction>
                                <QuadraticEase EasingMode="EaseOut"/>
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>

                    <!--DataTemplate for items when they are in the scatterView-->
                    <DataTemplate x:Key="ImageScatterTemplate" DataType="{x:Type s:ScatterViewItem}">
                        <cs:AlbumControl CloseClick="ScatterViewItemClose"/>
                    </DataTemplate>

                    <DataTemplate x:Key="VideoPlayerScatterTemplate" DataType="{x:Type s:ScatterViewItem}">
                        <cs:VideoPlayerControl Source="{Binding Source}" CloseClick="ScatterViewItemClose"/>
                    </DataTemplate>

                    <DataTemplate x:Key="DocScatterTemplate" DataType="{x:Type s:ScatterViewItem}">
                        <cs:DocViewerControl CloseClick="ScatterViewItemClose"/>
                    </DataTemplate>
                    
                    <cs:MainBarDataTemplateSelector x:Key="scatterViewDataTemplateSelector"
                                        ImageTemplate="{StaticResource ImageScatterTemplate}"
                                        VideoTemplate="{StaticResource VideoPlayerScatterTemplate}"
                                                    DocTemplate="{StaticResource DocScatterTemplate}"/>
                </ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </s:SurfaceWindow.Resources>
        
    <Grid>
        <!--TagVisualizer at the bottom so every point on the screen can trigger the tag event-->
        <s:TagVisualizer x:Name="MainTagVisualier" VisualizationAdded="MainTagVisualierVisualizationAdded">
            <Grid Background="Transparent" x:Name="MainContainer"
                  >
                <!--CitiLogo at the top left corner-->
                <Image Source="Resources/CitiLogo.PNG" VerticalAlignment="Top" HorizontalAlignment="Left" Stretch="None"/>
				
                <!--Concierage Arc Image in the middle-->
                <Image Source="Resources/Concierage-noback.png" HorizontalAlignment="Center" 
					VerticalAlignment="Center" Stretch="None"
					IsEnabled="False">
						<Image.RenderTransform>
							<TranslateTransform Y="{Binding ElementName=LayoutRoot, Path=Height,
							Converter={StaticResource dpropConverter}, ConverterParameter=-0.32}" />
						</Image.RenderTransform>
					</Image>
                
                <!--ScatterViewLayer, also it is across the whole screen-->
                <s:ScatterView x:Name="TopScatterLayer" Background="Transparent"
                                AllowDrop="True"
                                ItemsSource="{Binding ScatterViewItems}"
                                ItemTemplateSelector="{StaticResource scatterViewDataTemplateSelector}"
                                ItemContainerStyleSelector="{StaticResource ScatterContainerStyleSelector}"
                                s:SurfaceDragDrop.DragCanceled="ScatterLayerDragCanceled"
                                s:SurfaceDragDrop.DragCompleted="ScatterLayerDragCompleted"
                                s:SurfaceDragDrop.Drop="ScatterLayerDrop">
                </s:ScatterView>

                <!--Main Container Grid that contains both TileGrid & ControlGrid-->
                <Grid Width="{Binding ElementName=LayoutRoot, Path=Width, 
                    Converter={StaticResource dpropConverter}, ConverterParameter=0.4}" 
                      Height="{Binding ElementName=LayoutRoot, Path=Height, 
                    Converter={StaticResource dpropConverter}, ConverterParameter=0.5}" 
                      x:Name="ControlPanel" RenderTransformOrigin="0.5,0.5"
                      >
                    <Grid.RenderTransform>
                        <TransformGroup>
                            <!--Rotate when Border has been minipulated-->
                            <RotateTransform x:Name="ControlPanelRotate"/>
                            <!--Move the container a little bit down because of the Conceriege Arc-->
                            <TranslateTransform 
                                Y="{Binding ElementName=LayoutRoot, Path=Height,
							Converter={StaticResource dpropConverter}, ConverterParameter=0.05}"/>
                        </TransformGroup>
                    </Grid.RenderTransform>
                    
                    <!--Border than can be drag and rotate-->
                    <Border BorderThickness="20" CornerRadius="25"
                            IsManipulationEnabled="True"
                            ManipulationStarting="ControlPanelManipulationStarting"
                            ManipulationDelta="ControlPanelManipulationDelta"
                            ManipulationInertiaStarting="ControlPanelManipulationInertiaStarting">
                    	<Border.BorderBrush>
                    		<SolidColorBrush Color="{StaticResource CS5}"/>
                    	</Border.BorderBrush>
                        <Border.Triggers>
                            <!--Sleep effect of the border-->
                            <EventTrigger RoutedEvent="Border.Loaded">
                                <BeginStoryboard x:Name="BorderInOut">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                                         From="0" To="0.25" AutoReverse="True"
                                                         RepeatBehavior="Forever" Duration="0:0:2"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </Border.Triggers>
                    </Border>
					
                    <!--Control Grid is the Grid that show the cover flow of each type of media-->
                    <Grid x:Name="ControlGrid" 
                          Width="{Binding ElementName=ControlPanel, Path=Width,
                        Converter={StaticResource dpropConverter}, ConverterParameter=0.95}" 
                          Height="{Binding ElementName=ControlPanel, Path=Height,
                        Converter={StaticResource dpropConverter}, ConverterParameter=0.95}" 
                          RenderTransformOrigin="0.5, 0.5" 
                      Opacity="0">
                        <Grid.RenderTransform>
                            <!--init position, outside the screen-->
                            <TranslateTransform X="1000"/>
                        </Grid.RenderTransform>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <cs:CitiSurfaceButton Grid.Column="0"  Source="Resources/back.png" VerticalAlignment="Center"
                                                Click="ControlBackButtonClick"/>

                        <!--Set all the visibility to collapsed instead of hidden to prevent the system to load them all-->
                        <Grid x:Name="ControlContainer" Grid.Column="1">
                            <cs:ImageBarControl x:Name="ImageBar" Visibility="Collapsed"
                                                ClickElement="ControlPanelClickElement"/>
                            <cs:VideoBarControl x:Name="VideoBar" Visibility="Collapsed"
                                                ClickElement="ControlPanelClickElement"/>
                            <cs:DocumentBarControl x:Name="DocBar" Visibility="Collapsed"
                                                   ClickElement="ControlPanelClickElement"/>
                        </Grid>
                    </Grid>
                    
                    <!--The Tile view that shows when system start-->
                    <Grid x:Name="TileGrid" 
                           Width="{Binding ElementName=ControlPanel, Path=Width,
                        Converter={StaticResource dpropConverter}, ConverterParameter=0.95}" 
                          Height="{Binding ElementName=ControlPanel, Path=Height,
                        Converter={StaticResource dpropConverter}, ConverterParameter=0.95}" 
                          RenderTransformOrigin="0.5, 0.5">
                        <Grid.RenderTransform>
                            <TranslateTransform />
                        </Grid.RenderTransform>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="2*"/>
                            <ColumnDefinition Width="1*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        
                        <!--Picture Tile-->
                        <Border BorderThickness="2" Grid.Column="0" Grid.Row="0" >
                            <Grid x:Name="PicBarView" Style="{StaticResource BarGridStyle}"
                        TouchUp="PicBarViewTouchUp">
                                <Grid.Triggers>
                                    <EventTrigger RoutedEvent="Grid.TouchUp">
                                        <BeginStoryboard Storyboard="{StaticResource TileSlideOut}"/>
                                    </EventTrigger>
                                </Grid.Triggers>
                                <Grid.RenderTransform>
                                    <ScaleTransform />
                                </Grid.RenderTransform>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>

                                <Grid  Grid.Column="0" HorizontalAlignment="Stretch">
                                	<Grid.Background>
                                		<SolidColorBrush Color="{DynamicResource CS1}"/>
                                	</Grid.Background>
                                    <StackPanel Orientation="Vertical" VerticalAlignment="Bottom" HorizontalAlignment="Stretch">
                                        <Image Source="Resources/camera.png"  Width="30"/>
                                        <Label Content="Pictures" Style="{StaticResource TileStyle}" />
                                    </StackPanel>
                                </Grid>

                                <Image Grid.Column="1" x:Name="PicBarImage" Source="{Binding CurrShowingImageItem.ScreenshotSource}" Stretch="UniformToFill"/>
                            </Grid>
                        </Border>

                        <!--Document/Article Tile-->
                        <Border BorderThickness="2" Grid.Column="1" Grid.Row="0" Grid.RowSpan="2">
                            <Grid  x:Name="ArticleBarView" Style="{StaticResource BarGridStyle}"
                        TouchUp="ArticleBarViewTouchUp">
                                <Grid.Triggers>
                                    <EventTrigger RoutedEvent="Grid.TouchUp">
                                        <BeginStoryboard Storyboard="{StaticResource TileSlideOut}"/>
                                    </EventTrigger>
                                </Grid.Triggers>
                                <Grid.RenderTransform>
                                    <ScaleTransform />
                                </Grid.RenderTransform>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>

                                <Border Background="White" Grid.Row="0" x:Name="ArticleBarImage">
                                    <Grid Margin="20, 20">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="*" />
                                        </Grid.RowDefinitions>
                                        <Border BorderThickness="1" BorderBrush="Black"
                                                Grid.Row="0" Grid.RowSpan="3"/>

                                        <Image Grid.Row="0" x:Name="ImageElm" Source="{Binding CurrShowingDocItem.ScreenshotSource}" 
                                               VerticalAlignment="Center" HorizontalAlignment="Left" Stretch="Uniform" />

                                        <Label Grid.Row="1" x:Name="Title" Content="{Binding CurrShowingDocItem.Name}" Foreground="Black"
                                               FontWeight="ExtraBold"/>
                                        <Label Grid.Row="2" x:Name="Content" Content="{Binding CurrShowingDocItem.ContentExcerpt}" Foreground="DarkGray"/>
                                    </Grid>
                                </Border>

                                <Grid Grid.Row="1">
                                	<Grid.Background>
                                		<SolidColorBrush Color="{DynamicResource CS5}"/>
                                	</Grid.Background>
                                    <StackPanel Orientation="Horizontal" Margin="0,10">
                                        <Image Source="Resources/folder.png" Width="30"/>
                                        <Label Content="Document" Style="{StaticResource TileStyle}"/>
                                    </StackPanel>
                                </Grid>
                            </Grid>
                        </Border>

                        <!--Video Tile-->
                        <Border BorderThickness="2" Grid.Column="0" Grid.Row="1">
                            <Grid x:Name="VideoBarView" TouchUp="VideoBarViewTouchUp"
                        Style="{StaticResource BarGridStyle}">
                                <Grid.Triggers>
                                    <EventTrigger RoutedEvent="Grid.TouchUp">
                                        <BeginStoryboard Storyboard="{StaticResource TileSlideOut}"/>
                                    </EventTrigger>
                                </Grid.Triggers>
                                <Grid.RenderTransform>
                                    <ScaleTransform />
                                </Grid.RenderTransform>

                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                
                                <Image Grid.Column="0" x:Name="VideoBarImage" Source="{Binding CurrShowingVideoItem.ScreenshotSource}" Stretch="UniformToFill"/>
                                <Grid Grid.Column="1">
                                	<Grid.Background>
                                		<SolidColorBrush Color="{DynamicResource CS4}"/>
                                	</Grid.Background>
                                    <StackPanel VerticalAlignment="Bottom" >
                                        <Image Source="Resources/video.png" Width="30"/>
                                        <Label Content="Videos" Style="{StaticResource TileStyle}" />
                                    </StackPanel>
                                </Grid>
                            </Grid>
                        </Border>
                    </Grid>
                    </Grid>
            </Grid>
        </s:TagVisualizer>
    </Grid>
</s:SurfaceWindow>
